<template>
    <div>
        <!-- 面包屑导航区 -->
        <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>预约进程/历史</el-breadcrumb-item>
            <el-breadcrumb-item>已通过</el-breadcrumb-item>
        </el-breadcrumb>

        <!-- 卡片视图 -->
        <el-card>
            <el-table :data="applicationList" border stripe>
                <el-table-column type="index"></el-table-column>
                <el-table-column label="会议室" prop="roomId"></el-table-column>
                <el-table-column label="会议主题" prop="applyReason"></el-table-column>
                <el-table-column label="开会日期">
                    <template slot-scope="scope">
                        <div>
                            {{ $moment(scope.row.applyDate).subtract(1, 'months').format('YYYY/MM/DD') }}
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="开会时间">
                    <template slot-scope="scope">
                       <!-- <div v-if="scope.row.applyTimestate == 1">9:30-11:30</div>
                        <div v-if="scope.row.applyTimestate == 2">11:30-13:30</div>
                        <div v-if="scope.row.applyTimestate == 3">15:30-17:30</div>
                        <div v-if="scope.row.applyTimestate == 4">17:30-19:30</div>
                        <div v-if="scope.row.applyTimestate == 5">19:30-20:30</div> -->
                        <div >{{$moment(scope.row.applyStart).format('HH:mm')}}-{{$moment(scope.row.applyEnd).format('HH:mm')}}</div>
                    </template>
                </el-table-column>
                <el-table-column label="申请日期">。
                    <template slot-scope="scope">
                        <div>
                            {{ $moment(scope.row.applyTime).subtract(1, 'months').format('YYYY/MM/DD') }}
                        </div>
                    </template>
                </el-table-column>

				<el-table-column label="操作" width="180" align="center">
				    <template slot-scope="scope">
						<el-button
						    type="text"
						    icon="el-icon-plus"
						    @click="handleAdd(scope.row.applyId)"
						>添加参会人员</el-button>
				        <el-button
				            type="text"
				            icon="el-icon-edit"
				            @click="handleSign(scope.row.applyId)"
				        >签到</el-button>
				    </template>
				</el-table-column>
            </el-table>

            <!-- 分页区域 -->
            <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.currentPage"
            :page-sizes="[2, 4, 8, 10]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
            </el-pagination>
        </el-card>

		<el-dialog
		  title="提示"
		  :visible.sync="centerDialogVisible"
		  center>
		  <div style="display: flex;justify-content: center;align-items: center;border:1px solid #000;">
			  <img :src="qrCodeImg" />
		  </div>
		  <span slot="footer" class="dialog-footer">
		    <el-button @click="centerDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
		  </span>
		</el-dialog>
        <el-dialog
		  title="添加参会人员"
		  :visible.sync="addDialogVisible"
		  center>
          <div style="display: flex;justify-content: center;align-items: center;">
            <el-col :span="11" :xs="20">
                <el-card>
                <el-select v-model="value" @change="selectDepartment(value)" placeholder="请选择" style="display: flex;justify-content: center;align-items: center;" size="small" >
                    <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                    >
                    </el-option>
                </el-select>
                <el-table :data="departmentPersonnelList" border stripe>
                    <el-table-column label="员工编号" prop="staffId"></el-table-column>
                    <el-table-column label="员工姓名" prop="staffName"></el-table-column>
                    <el-table-column label="添加">
                    <template slot-scope="scope">
                        <!-- 添加按钮 -->
                        <el-tooltip class="item" effect="dark" content="添加参会人员" placement="top" :enterable="false">
                            <el-button
						    type="text"
						    icon="el-icon-plus"
						    @click="addParticipate(scope.row)"
						></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                </el-table>
                    <el-tag
                    v-for="tag in tags"
                    :key="tag.lableId"
                    closable
                    @close="handleClose(tag)"
                    @click="handleViewTag(tag)"
                    :type="tag.lableType">
                    {{tag.lableName}}
                    </el-tag>

                </el-card>
            </el-col>
            <el-col :span="2" :xs="4">
                <span style="font-size: 40px;" >=></span>
            </el-col>
            <el-col :span="11" :xs="20">
                <el-card>
                    <el-table :data="participateList" border stripe>
                        <el-table-column label="员工编号" prop="staffId"></el-table-column>
                        <el-table-column label="员工姓名" prop="staffName"></el-table-column>
                        <el-table-column label="删除">
                        <template slot-scope="scope">
                            <!-- 刪除按钮 -->
                            <el-tooltip class="item" effect="dark" content="删除参会人员" placement="top" :enterable="false">
                                <el-button
                                type="text"
                                icon="el-icon-minus"
                                @click="removeParticipate(scope.$index)"
                            ></el-button>
                            </el-tooltip>
                        </template>
                        </el-table-column>
                    </el-table>
                        <el-button
						    type="text"
						    icon="el-icon-close"
						    @click="handleClear()"
						>清空</el-button>
				        <el-button
				            type="text"
				            icon="el-icon-plus"
				            @click="addTag()"
				        >添加到新的标签</el-button>
                </el-card>
            </el-col>
          </div>
          <span slot="footer" class="dialog-footer">
		    <el-button @click="addDialogVisible = false">取 消</el-button>
		    <el-button type="primary" @click="submitParticcipate()">提交新名单</el-button>
		  </span>
	    </el-dialog>
        <el-dialog
		  :title="tag.name"
		  :visible.sync="viewTagParticipate"
		  center
          width="30%"
          >
            <div style="display: flex;justify-content: center;align-items: center;">
            <el-col :span="24" :xs="20">
                <el-card>
                <el-table :data="tagPersonnelList" border stripe>
                    <el-table-column label="员工编号" prop="staffId"></el-table-column>
                    <el-table-column label="员工姓名" prop="staffName"></el-table-column>
                    <el-table-column label="添加">
                    <template slot-scope="scope">
                        <!-- 添加按钮 -->
                        <el-tooltip class="item" effect="dark" content="添加参会人员" placement="top" :enterable="false">
                            <el-button
						    type="text"
						    icon="el-icon-plus"
						    @click="addParticipate(scope.row)"
						></el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
                </el-table>
                </el-card>
            </el-col>
          </div>
          <span slot="footer" class="dialog-footer">
		    <el-button @click="viewTagParticipate = false">取 消</el-button>
		    <el-button type="primary" @click="addAllParticipate()">全部添加</el-button>
		  </span>
        </el-dialog>

        <el-dialog title="请输入标签名：" :visible.sync="addTagDialogVisible" center width="20%">
            <el-input v-model="newTagName"  placeholder="请输入标签名"></el-input>
          <span slot="footer" class="dialog-footer">
		    <el-button type="primary" @click="handleAddTag(newTagName)">添加标签</el-button>
		  </span>
        </el-dialog>
    </div>

</template>
<style>

</style>

<script>
import qs from 'qs';
export default {
    data () {
        return {
            userInfo:JSON.parse(localStorage.getItem("userInfo")),
            // tags: [
            //     { name: '标签五六七一', type: '' },
            //     { name: '标签二', type: 'success' },
            //     { name: '标签三', type: 'info' },
            //     { name: '标签四', type: 'warning' },
            //     { name: '标签五', type: 'danger' }
            // ],
            newTagName:"",
            tags: [
            ],
            tag:'',
            options: [{
                value: '1',
                label: '产品室'
                }, {
                value: '2',
                label: '场景室'
                }, {
                value: '3',
                label: '数据室'
                }, {
                value: '4',
                label: '渠道室'
                }, {
                value: '5',
                label: '基础软件室'
            }],
            value: '',
            manList:[],
            participateList:[],
            departmentPersonnelList:[],
            tagPersonnelList:[],
            addTagDialogVisible:false,
            viewTagParticipate:false,
            centerDialogVisible: false,
            addDialogVisible:false,
            applyId:0,
            applicationList: [],
            queryInfo: {
                pageSize: 4,
                currentPage: 1,
                auditStatus: 3
            },
            total: 0,
            qrCodeImg:''
        }
    },
    created () {
        this.getList()
    },
    methods: {
        async handleClose(tag) {
            const confirmResult = await this.$confirm('此操作将删除此标签, 是否继续?',
            '提示',
            {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).catch(err => err)
            if (confirmResult !== 'confirm') {
                return this.$message.info('已取消删除')
            }
            const { data: res } = await this.$http.delete('/lable/deleteTag', { data: { lableId: tag.lableId } })
            if (res.code !== 100) {
                return this.$message.error('取消标签失败！')
            }
            this.tags.splice(this.tags.indexOf(tag), 1);
        },


        //请求tag标签的完整名单
        async handleViewTag(tag) {
            this.tag=tag
            const { data: res } = await this.$http.post('/lable/viewtagpersonnel', { lableId: tag.lableId })
            console.log(res)
            if (res.code !== 100) {
                return this.$message.error('获取标签页失败！')
            }
            this.tagPersonnelList = res.extend.result
            this.viewTagParticipate=true

        },
        async getList () {
            const { data: res } = await this.$http.get('/apply/approved', { params: this.queryInfo })
            console.log(res)
            if (res.code !== 100) {
                return this.$message.error('获取申请列表失败！')
            }
            this.applicationList = res.extend.result.records
            this.total = res.extend.result.total
        },
        //查询相应部门对应的人员名单
        async selectDepartment(department){
            //找出value对应的label
            let obj = {};
            obj = this.options.find((item)=>{//这里的options就是上面遍历的数据源
                return item.value === department;//筛选出匹配数据
            });
            //请求
            const { data: res } = await this.$http.post('/apply/selectdepartment', { department: obj.label,applyId:this.applyId })
            if (res.code !== 100) {
                return this.$message.error('获取信息失败！')
            }else{
                this.departmentPersonnelList = res.extend.result
            }
        },
        //获取标签信息
        async getTags() {
            //获取标签信息
            const { data: res } = await this.$http.post('/lable/querylable',  { staffId: this.userInfo.staffId })
            if (res.code !== 100) {
                return this.$message.error('标签信息获取失败')
            }else{
                this.tags = res.extend.result
                console.log(this.tags)
            }
        },
        //获取参会人员名单
        async handleAdd(Id) {
            this.applyId=Id;
            const { data: res } = await this.$http.post('/apply/queryparticipate',  { applyId: Id })
            if (res.code !== 100) {
                return this.$message.error('参会人员信息获取失败！')
            }else{
                this.participateList = res.extend.result
                this.getTags();
                this.addDialogVisible=true;
            }

        },

        handleSizeChange (newSize) {
            this.queryInfo.pageSize = newSize
            this.getList()
        },
        handleCurrentChange (newPage) {
            this.queryInfo.currentPage = newPage
            this.getList()
        },
        //获取二维码
        async handleSign(id){
            const { data: res } = await this.$http.post('/sign/meetingId',  { applyId: id })
            if (res.code !== 100) {
                return this.$message.error('二维码获取失败')
            }else{
                this.qrCodeImg='http://127.0.0.1:3300/sign/createqrcode?id='+res.extend.result
                console.log(this.qrCodeImg)
                this.centerDialogVisible = true;
            }

        },
        //根据部门名单中的名字 向参与名单中添加名字
        addParticipate(staff){
            let obj = {};
            obj = this.participateList.find((item)=>{//这里的options就是上面遍历的数据源
                return item.staffId === staff.staffId;//筛选出匹配数据
            });
            if(obj===undefined){
                this.participateList.push(staff);
            }else{
                this.$message.error("此人已存在！！!")
            }

        },
        //根据标签 向参与名单中添加名字
        addAllParticipate(){
            const that=this
            this.tagPersonnelList.forEach(function (tagPersonnel) {
                let obj = {};
                obj = that.participateList.find((item)=>{//这里的options就是上面遍历的数据源
                    return item.staffId === tagPersonnel.staffId;//筛选出匹配数据
                });
                if(obj===undefined){
                    that.participateList.push(tagPersonnel);
                }
                });
                that.viewTagParticipate=false

        },
        //删除参与名单中的名字
        removeParticipate(index){
            this.participateList.splice(index,1) ;
        },
        handleClear(){
            this.participateList.splice(0,this.participateList.length);
        },
        //提交修改后的参与名单
        async submitParticcipate(){
            let staffId=[];
            let i=0;
            this.participateList.forEach(element => {
                staffId[i]=element.staffId
                i++;
            });
            console.log(staffId)
            const { data: res } = await this.$http.post('/apply/changeparticipate',{staffId:staffId,applyId:this.applyId})
            if (res.code !== 100) {
                return this.$message.error('更新参会名单失败！')
            }else{
                this.addDialogVisible=false;
                return this.$message.success('更新参会名单成功')

            }
            this.addDialogVisible = false


        },
        //添加新的标签
        addTag(lableName){
            this.addTagDialogVisible=true;
            console.log(lableName)
        },
        async handleAddTag(){
            let staffId=[];
            let i=0;
            this.participateList.forEach(element => {
                staffId[i]=element.staffId
                i++;
            });
            console.log(staffId)
            const { data: res } = await this.$http.post('/lable/addlable',{staffId:staffId,userId:this.userInfo.staffId,lableName:this.newTagName})
            if (res.code !== 100) {
                this.addTagDialogVisible=false;
                return this.$message.error('添加标签失败！')
            }else{
                this.getTags()
                this.addTagDialogVisible=false;
                return this.$message.success('标签添加成功')

            }
          this.addDialogVisible = false


        }
    }
}
</script>
